<template>
    <el-container id="body1">

        <el-header class=" bg-pink-300 rounded">

            <Header />

        </el-header>
        <el-main>
            <div class="bg-white rounded-3xl px-5 py-5" style="width: 100%;" id="login">


                <el-form :model="form" ref="form" :rules="rules" :inline="false" size="normal">


                    <el-form-item >
                        <div class="flex justify-center" style="width: 95%;">
                            <el-input style="width: 96%; height: 8vh;"  v-model="searchValue" placeholder="请输入联系方式或者订单号进行查询"></el-input>
                            <el-button type="success" size="default" @click="search" class="h-8vh"> 查询 </el-button>
                        </div>

                    </el-form-item>

                </el-form>
            </div>
            <br>

            <div class="bg-white rounded-3xl px-5 py-5" style="width: 100%;" id="login" v-if="result">
                查询结果
            </div>
        </el-main>

    </el-container>
</template>
<script setup>
import { ref } from 'vue';
import Header from '/src/component/header.vue'
const result = ref(false)
const searchValue = ref('')
function search() {
    result.value = true;
}
</script>
<style>
#body1 {
    background: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202111%2F18%2F20211118224423_90be6.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1695300329&t=c5f35cda4199b9a8b3211173efaee644");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
    height: 100vh;
    width: 100%;
}

#login {
    border: 2px solid transparent;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.2);
}
</style>   